<!--
 * 首页
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
  <div class="home">

    <div class="section" v-for="(item, index) in songsList" :key="index">
      <div class="section-title">
        <i :class="item.icon"></i>
        <b>{{ item.name }}</b>
      </div>
      <content-list :contentList="item.list"></content-list>
    </div>
<!--    <swiper />-->
  </div>
</template>

<script>
import Swiper from "../components/Swiper";
import contentList from "../components/ContentList";
import { getAllSinger, getAllSongList } from "../api/index";
import { mapGetters } from 'vuex';
export default {
  name: "home",
  components: {
    Swiper,
    contentList,
  },
  computed: {
    ...mapGetters([
      'listOfSongs',      //当前播放列表
      'userId',           //当前登录用户id
    ])
  },
  data () {
    return {
      songsList: [
        { name: "精选歌单", list: [], icon: "iconfont icon-r-list" },
        { name: "热门歌手", list: [], icon: "iconfont icon-r-love" },
      ],
    };
  },
  created () {
    this.getSongList(this.userId);
    this.getSinger();
  },
  methods: {
    getSongList (userId) {
      console.log("userId == " + userId)
      //获取推荐歌单
      getAllSongList(userId)
        .then((res) => {
          this.songsList[0].list = res.slice(0, 10);
        })
        .catch((e) => {
          if (e.data == undefined) {
            if (
              e ==
              "TypeError: Cannot read properties of undefined (reading 'status')"
            ) {
              e = "Network Error";
            }
            this.$message({
              showClose: true,
              message: e,
              type: "error",
              duration: 5000,
            });
          } else {
            this.$message({
              showClose: true,
              message: e.data,
              type: "error",
              duration: 5000,
            });
          }
        });
    },
    getSinger () {
      //获取前十名歌手
      getAllSinger()
        .then((res) => {
          this.songsList[1].list = res.slice(0, 10);
        })
        .catch((e) => {
          if (e.data == undefined) {
            if (
              e ==
              "TypeError: Cannot read properties of undefined (reading 'status')"
            ) {
              e = "Network Error";
            }
            this.$message({
              showClose: true,
              message: e,
              type: "error",
              duration: 5000,
            });
          } else {
            this.$message({
              showClose: true,
              message: e.data,
              type: "error",
              duration: 5000,
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: #f4f4f4;
}

.section {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.section-title i {
  font-size: 34px;
  margin-right: 10px;
  color: #333;
}

.section-title b {
  font-size: 32px;
  color: #333;
}
</style>
